<template>
  <div class="template2" style="padding: 123px 0px 0px 0px;">
    <el-container>
      <div class="head" id="head1">
        <div class="tit">管家排期
            <el-button type="info" size="mini" @click="serverType('1')" plain :class="tab==1?'act':''" style="margin-left:20px;">日</el-button>
            <el-button type="info" size="mini" @click="serverType('0')" plain :class="tab==0?'act':''">月</el-button>
        </div>
        <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline">
          <el-form-item prop="entryTime" v-if="tab==1">
            <el-date-picker size="mini" style="width:150px;" v-model="formInline.entryTime"  type="date" placeholder="选择日期"  value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
          <el-form-item prop="status" v-if="tab==1">
            <el-select size="mini" style="width:100px;" v-model="formInline.status" placeholder="管家类型" >
              <el-option label="全职" value="1"></el-option>
              <el-option label="兼职" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="tab==0" prop="month">
            <el-date-picker v-model="formInline.month" style="width:150px;" size="mini" type="month" placeholder="选择月" value-format="yyyy-MM-dd"> </el-date-picker>
          </el-form-item>
          <el-form-item v-if="tab==0"  prop="adminName">
            <el-autocomplete size="mini" style="width:100px;" :maxlength='10' class="inline-input" v-model="formInline.adminName" :fetch-suggestions="querySearchAdmin" placeholder="管家姓名" :trigger-on-focus="false" @select="handleSelectA" ></el-autocomplete>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
            <span @click="resetForm('formInline')" class="reset">
              <i class="icon iconfont icon-icon901"></i> 重置
            </span>
          </el-form-item>
          <div class="tips">
            <span class="box box1"></span><span>空闲</span>
            <span class="box box2"></span><span>已排单</span>
            <span class="box box3"></span><span>停止接单</span>
          </div>
        </el-form>
      </div>
      <el-main style="height:100% !important">
          <BSListDay v-if="tab==1"></BSListDay>
          <BSListMonth v-if="tab==0"></BSListMonth>
      </el-main>
    </el-container>
  </div>
</template>
<script> 
import { request } from "../../assets/request.js";
import BSListMonth from "./BSListMonth.vue";
import BSListDay from "./BSListDay.vue";
import {setTime} from "../../assets/session.js"
export default {
  data() {
    return {
      height: 0,
      formInline: {
        housesName: "",
        entryTime:'',
        status:'1',
        month:'',
        adminName:'',
      },
      listNum:10,
      tab:1,
      adminId:'',
    };
  },
  created() {
      this.adminAll()
      let formInline=this.formInline
      let date=new Date()
      formInline.entryTime=setTime(date)
      this.$root.$on("propertBank",data=>{
        this.listNum=data
      })
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    onSubmit() {   //搜索查询
      let formInline=this.formInline
      console.log(formInline)
      let that=this
      if(this.tab==1){ //日管家排期
        let obj={
          date:formInline.entryTime,
          isFullTime:parseInt(formInline.status)
        }
        this.$root.$emit('listDay',obj)
      }else{ //月管家排期
        this.adminId
        let obj={
          uid:that.adminId,
          date:formInline.month,
        }
        this.$root.$emit('listMonth',obj)
      }
    },
    pedestalList(){
      this.$root.$emit("pedestalList",'no')
    },
    serverType(num){ //tab
        console.log(num)
        this.tab=num
    },
    adminAll() { //查询所有平台员工
      let url = "admin";
      let that=this   //解决this指向问题
      request.ajaxGet({
        url,
        that,
        fn(res){
          // console.log(res.list);
          let data=res.list;
          for(let i in data){
            data[i].value=data[i].realName
          }
          that.admins=data
        }
      })
    },
    querySearchAdmin(queryString, cb) { //所有员工筛选
      var restaurants = this.admins;
      var len = restaurants.length;
      var arr = [];
      for(var i=0;i<len;i++){
          //如果字符串中不包含目标字符会返回-1
          if(restaurants[i].value.indexOf(queryString)>=0){
              arr.push(restaurants[i]);
          }
      }
      cb(arr);
    },
    handleSelectA(item) { //选中员工
      console.log(item.id);
      let formInline=this.formInline;
      this.adminId=item.id;
    }
  },
  mounted() {

  },
  components:{
    BSListDay,   //日统计表
    BSListMonth, //月统计表
  },
};
</script>
<style lang="less" scoped>
.act{
    background:#5e6d82;
    color:#ffffff;
}
.head{
  .tips{
    float: right;
    width:250px;
    height: 50px;
    span{
      font-size: 12px;
      color: #1f2d3d;
      float: left;
      line-height: 20px;
      margin-left: 5px;
    }
    .box{
      display: block;
      width: 20px;
      height: 20px;
      border-radius: 3px;
      margin-left: 20px;
    }
    .box1{
      background: #00cc99;
    }
    .box2{
      background: #ff3300;
    }
    .box3{
      background: #999;
    }
  }
}
</style>

<style scoped lang="less">
@import "../template2.less";
</style>